<template>
  <div class="pug-select pug-pro-filed-search-select pug-select-single pug-select-allow-clear pug-select-show-arrow" :id="cref">
    <div class="pug-select-selector" @click="expandItem">
      <span class="pug-select-selection-placeholder">{{ showvalue }}</span>
    </div>
    <span class="pug-select-arrow" style="user-select: none;"><span class="anticon anticon-down pug-select-suffix"><svg
      viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em"
      fill="currentColor" aria-hidden="true"><path
      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span>
    </span>

    <div class="pug-select-dropdown pug-select-dropdown-placement-bottomLeft"
         :class="[showExpand?'':'pug-select-dropdown-hidden']"
         style="width: 100%; left: 0px; top: 32px;">
      <div>
        <div class="rc-virtual-list" style="position: relative;">
          <div class="rc-virtual-list-holder" style="max-height: 256px; overflow-y: auto;">
            <div>
              <div class="rc-virtual-list-holder-inner" style="display: flex; flex-direction: column;">
                <div v-for="(item,index) in items" :key="index"
                     class="pug-select-item pug-select-item-option pug-pro-filed-search-select-option"
                     :title="item.text" @click="selectItem(index)">
                  <div class="pug-select-item-option-content">{{ item.text }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PugSelect",
  data() {
    return {
      showExpand: false,
      showvalue: ""
    }
  },
  props: {
    modelValue: String,
    cref:{
      type:String,
      default:""
    },
    showtext: {
      type: String,
      default: "请选择"
    },
    items: {
      type: Array,
      default: [{text: 'text1', value: 'value1'}, {text: 'text2', value: 'value2'}]
    },
    isValue: {
      type: Boolean,
      default: false
    },
  },
  mounted() {
    setTimeout(() => {
      var obj = this.items.find(item => item.value == this.modelValue);
      if(obj) {
        this.showvalue = obj.text
        var value = this.items.find(item => item.value == this.modelValue).value;
        this.$emit("update:modelValue", this.$props.isValue ? this.showvalue : value);
      }else{
        this.showvalue = this.$props.showtext;
        this.$emit("update:modelValue", this.$props.isValue ? this.items[0].text : this.items[0].value);
      }
    }, 300)
  },
  methods: {
    expandItem() {
      this.showExpand = !this.showExpand;
    },
    selectItem(index) {
      var selectItems = this.items[index];
      this.showvalue = selectItems.text;
      this.showExpand = false;
      this.$emit("update:modelValue", this.$props.isValue ? selectItems.text : selectItems.value);
      this.$emit("change", selectItems);
    }
  }
}
</script>

<style scoped>

</style>
